<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>场景切换</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: sans-serif;
        }

        #scene1,
        #scene2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 1s ease;
        }

        #scene1 {
            background-image: linear-gradient(135deg, #f5f5f5 20%, #f9fad4 20%, #f9fad4 40%, #f5f5f5 40%, #f5f5f5 60%, #f8eaf0 60%, #f8eaf0 80%, #f5f5f5 80%, #f5f5f5 100%);
            z-index: 2;
        }

        #scene2 {
            background-color: black;
            color: white;
            z-index: 1;
            opacity: 0;
        }

        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: purple;
            opacity: 0;
            z-index: 3;
            pointer-events: none;
            transition: opacity 1.5s ease;
        }
    </style>
</head>

<body>
    <div id="scene1">
        <label>请输入你的出生日期：</label>
        <input type="date" id="birthDate">
        <button onclick="goToScene2()">进入下一幕</button>
    </div>

    <div id="scene2">
        <div id="ageInfo">123479812347980</div>
    </div>

    <div id="overlay"></div>

    <script>
        function calculateAge(dateStr) {
            const birth = new Date(dateStr);
            const now = new Date();
            const age = now.getFullYear() - birth.getFullYear();
            const remaining = 80 - age;
            return { age, remaining };
        }

        function goToScene2() {
            const birthDate = document.getElementById('birthDate').value;
            if (!birthDate) return alert('请先输入出生日期');

            const overlay = document.getElementById('overlay');
            const scene1 = document.getElementById('scene1');
            const scene2 = document.getElementById('scene2');

            // 遮罩渐显
            overlay.style.opacity = 1;

            // 等待遮罩完成后，切换背景并开始第二幕
            setTimeout(() => {
                scene1.style.display = 'none';

                const { age, remaining } = calculateAge(birthDate);
                document.getElementById('ageInfo').innerHTML = `您已经度过了 ${age} 年，今年 ${age} 岁，预计余生还有 ${remaining} 年。`;

                overlay.style.opacity = 0; // 遮罩渐隐

            }, 1500);

        }
    </script>
</body>

</html>